<template>
  <el-container height="100%" direction="vertical" class="no-margin no-padding">
    <el-header height="60px" background-color="#545c64" class="no-margin no-padding">
      <!--顶部导航-->
      <toolbar :tools="tools" :click="onNavigationClick"
               :expend-navigation="expendNavigation" :switch-navigation="switchNavigation"></toolbar>
    </el-header>
    <el-container>
      <!-- 侧滑导航 -->
      <el-aside width="null" :style="asideHeight" class="sea-menu-box">
        <navigation v-if="menus" :menus="menus" :expand="expendNavigation"
                    :click="onNavigationClick"></navigation>
      </el-aside>

      <el-container>
        <!-- 中央面板 -->
        <el-main ref="main" v-if="panelHeight" :style="panelHeight" class="main-container">
          <center-tabs :width="tab_width" :height="tab_height"></center-tabs>
          <!--          <router-view/>-->
        </el-main>

        <!-- 软件版本以及归属 -->
        <el-footer height="36px" class="main-footer">
          <version></version>
        </el-footer>
      </el-container>

    </el-container>

    <keep-alive>
      <sea-album v-if="showAlbum"  :initial-index="initialIndex" :url-list="urlList" :on-close="closeAlbum"></sea-album>
    </keep-alive>

  </el-container>
</template>

<script>
import navigation from './main/navigation';
import toolbar from './main/toolbar';
import version from "./main/version";
import CenterTabs from "./main/center-tabs";
import MenuManager from "../starter/menu-manager";

/**
 * 首页
 */
export default {
    components: {
        navigation, toolbar, version, CenterTabs
    },
    name: "home",
    data() {
        return {
            // 中央页面展示区域
            mainPanel: undefined

            // 中央面板高度
            , panelHeight: undefined

            // 左侧菜单栏是否展开
            , expendNavigation: true
            // 左侧菜单导航高度
            , asideHeight: undefined
            // 左侧菜单导航数据列表
            , menus: undefined

            , tab_width: undefined
            , tab_height: undefined

            , centerMarginTop: undefined

            // 顶部导航数据列表
            , tools: undefined
            // 顶部导航的 dom 对象
            , dom_toolbar: undefined

            // 全局相册 - 是否展开
            , showAlbum: false
            // 全局相册 - 图片列表
            , urlList: []
            // 全局相册 - 选中的图片
            , initialIndex: 0
        };
    },
    created: function () {
        // 如果上下文中找不到用户信息，退出登录
        this.userInfo = this.$application.getUserInfo();
        if (this.userInfo === undefined) {
            this.$router.push({path: '/index'});
            return;
        }

        // 载入侧滑导航
        MenuManager.getMenu().then((menus) => {
            this.menus = menus;
        });

        // 载入顶部导航
        MenuManager.getTools().then((tools) => {
            this.tools = tools;
        });

        // 全局相册侦听事件
        this.$eventbus.registryAlbum( this.openAlbum);

        this.resize();
    }
    , mounted() {
        this.mainPanel = this.$refs.main.$el;
        // 侦听窗口的大小变化，计算高度
        window.addEventListener("resize", this.resize, false);

        // 顶部导航的 dom 对象
        let dom_toolbar = document.getElementsByClassName('sea-toolbar');
        if (Layers.isNotEmpty(dom_toolbar)) {
            this.dom_toolbar = dom_toolbar[0];
        }

        // dom 完成渲染之后，再重置一下状态，会修正计算的误差值
        this.resize();
    }
    , methods: {
        /**
         * 面板跟随窗口变化
         */
        resize: function () {
            this.asideHeight = 'height:' + (document.body.clientHeight - 60) + 'px';

            if (this.dom_toolbar) {
                this.centerMarginTop = this.dom_toolbar.clientHeight - 60;
                this.panelHeight = 'margin-top:' + this.centerMarginTop + 'px;height:' + (document.body.clientHeight - this.centerMarginTop - 120) + 'px';
            } else {
                this.panelHeight = 'height:' + (document.body.clientHeight - 120) + 'px';
            }

            if (this.mainPanel) {
                this.tab_width = this.mainPanel.clientWidth;
                this.tab_height = this.mainPanel.clientHeight;
            }
        },
        /**
         * 控制菜单栏展开关闭
         */
        switchNavigation() {
            this.expendNavigation = !this.expendNavigation;
        },
        /**
         * 左侧菜单点击事件
         *
         * @param key       页面 id
         * @param keyPath   页面 id 列表，包含父级 id
         */
        onNavigationClick: function (key, keyPath) {
            // 菜单栏中被标记为 ignore 的不会触发路由，是一些固定的工具栏
            if (key !== 'ignore') {
                this.$router.push({path: "/" + keyPath.join('/')});
            }
        },
        /**
         * 关闭相册
         */
        closeAlbum() {
            this.showAlbum = false;
        },
        /**
         * 打开相册
         *
         * @param opts {{urls: [string], index: number}}  图片列表
         */
        openAlbum(opts) {
            this.urlList = opts.urls;
            this.initialIndex = opts.index;
            this.showAlbum = true;
        }
    }
    , destroyed() {
        // 相册侦听事件
        this.$eventbus.unregisterAlbum(this.openAlbum);

        // 移除事件
        window.removeEventListener('resize', this.resize)
    }
}
</script>

<style scoped>
/*菜单栏宽度*/
.main-footer {
    background: #fff;
    padding: 8px;
    color: #444;
    font-size: smaller;
    border-top: 1px solid #d2d6de;
}

/*中央视图区域*/
.main-container {
    padding: 0;
}

/*设置背景色*/
.sea-menu-box {
    border: 0;
    background-color: #545c64;
}

/*隐藏滚动条*/
.sea-menu-box::-webkit-scrollbar {
    display: none;
}


</style>

